<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3过渡</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
</style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>
<!-- 
    CSS3 过渡（★★★）
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用。

transition: 要过渡的属性  花费时间  运动曲线  何时开始;


属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
花费时间： 单位是 秒（必须写单位） 比如 0.5s
运动曲线： 默认是 ease （可以省略）
何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
后面两个属性可以省略
记住过渡的使用口诀： 谁做过渡给谁加

linear          匀速
ease            逐渐慢下来
ease-in         加速
ease-out        减速
ease-in-out     先加速后减速

 -->
</html>